<template>
  <div class="container">
    <div class="tableList" v-if="type == 'equipment_room'">
      <div class="add">
        <span>巡视环境</span>
        <el-button
          size="mini"
          icon="el-icon-plus"
          type="primary"
          v-if="!unEdit"
          @click="addCheckItem"
        >
          新增
        </el-button>
      </div>
      <div class="table">
        <base-table :tableSetting="patrolEvnConfig"></base-table>
      </div>
    </div>
    <div class="tableList">
      <div class="add" style="margin-left: 0">
        <span class="require">巡视设备</span>
        <el-button
          size="mini"
          icon="el-icon-plus"
          type="primary"
          v-if="!unEdit"
          @click="addParamsItem"
        >
          新增
        </el-button>
      </div>
      <div class="table">
        <base-table :tableSetting="patrolEquipConfig"></base-table>
      </div>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      width="30%"
      @doSubmit="submitEvn"
      @doClose="() => (show = false)"
    >
      <div style="padding: 20px 20px 50px 20px">
        <editForm
          :formConfig="evnFormConfig"
          ref="editForm"
          :formData="evnFormData"
        ></editForm>
      </div>
    </dialogPublic>
    <dialogPublic
      :title="title1"
      :show.sync="show1"
      width="80%"
      @doSubmit="submitEquip"
      @doClose="() => (show1 = false)"
    >
      <addEquipment :rowInfo="rowInfo" :unEdit="unEdit" ref="addEquipment" />
    </dialogPublic>
    <dialogPublic
      title="信息选择"
      :show.sync="showDevice"
      @doSubmit="newEquipmentSelect"
      @doClose="() => (showDevice = false)"
      :fullscreen="true"
      appendTobody
    >
      <equipmentSelect
        ref="newMember"
        v-if="showDevice"
        :seleteSetting="orgMemberSelect"
      ></equipmentSelect>
    </dialogPublic>
  </div>
</template>

<script>
import addEquipment from "./addEquipment.vue";
export default {
  props: {
    patrolEnvList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    patrolEquipList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    unEdit: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "equipment_room",
    },
  },
  components: {
    addEquipment,
  },
  data() {
    return {
      title: "",
      show: false,
      title1: "",
      show1: false,
      showDevice: false,
      orgMemberSelect: {},
      //基本参数
      checkItem: "",
      rowInfo: {},
      patrolEvnConfig: {
        indexShow: true,
        highlightRow: false,
        column: [
          {
            label: "检查项",
            textAlign: "center",
            prop: "envNorm",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            width: "150",
            hide: false,
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.rowIndex = index;
                  this.editCheckItem(row);
                },
              },
              {
                text: "删除",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.patrolEvnConfig.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
      },
      patrolEquipConfig: {
        indexShow: true,
        highlightRow: false,
        column: [
          {
            label: "设备名称",
            textAlign: "center",
            prop: "equipmentName",
          },
          {
            label: "巡视标准",
            textAlign: "center",
            prop: "standardName",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            width: "300",
            hide: false,
            buttonArr: [
              {
                text: "查看",
                isShow: () => {
                  return this.unEdit;
                },
                methods: (row, index) => {
                  this.editParamItem(row);
                },
              },
              {
                text: "编辑",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.rowIndex = index;
                  this.editParamItem(row);
                },
              },
              {
                text: "删除",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.patrolEquipConfig.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
              {
                text: "上移",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.moveUp(row, index);
                },
              },
              {
                text: "下移",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.moveDown(row, index);
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
      },
      //弹出框检查项表单配置信息
      evnFormConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "检查项名称",
            prop: "envNorm",
            type: "text",
            span: 24,
            required: true,
          },
        ],
      },
      //弹出框表单数据
      evnFormData: {},
      CurrentRow: 0,
    };
  },
  watch: {
    patrolEnvList: {
      handler(val) {
        this.patrolEvnConfig.data = val;
      },
      deep: true,
    },
    patrolEquipList: {
      handler(val) {
        this.patrolEquipConfig.data = val;
      },
      deep: true,
    },
    unEdit: {
      handler(val) {
        this.patrolEvnConfig.column[1].hide = val;
        //this.patrolEquipConfig.column[2].hide = val;
      },
    },
  },
  created() {},
  methods: {
    //新增巡视环境
    addCheckItem() {
      this.title = "新增巡视环境";
      this.evnFormData = {};
      this.show = true;
    },
    //新增巡视设备
    addParamsItem() {
      this.orgMemberSelect = {
        multiple: true, //单选还是多选
        chosedData: [],
        filterConfig: [],
        managerUnit: [],
        standardType: "",
      };
      this.showDevice = true;
    },
    //编辑巡视环境
    editCheckItem(row) {
      this.title = "编辑巡视环境";
      this.evnFormData = Object.assign({}, row);
      this.show = true;
    },
    //编辑巡视设备
    editParamItem(row) {
      this.title1 = "编辑巡视设备";
      this.rowInfo = Object.assign({}, row);
      this.show1 = true;
    },
    //确定选择设备
    newEquipmentSelect() {
      try {
        let data = this.$refs.newMember.getSelectData();
        let ids = this.patrolEquipConfig.data.map((item) => item.equipmentId);
        data.forEach((item) => {
          if (ids.includes(item.id)) {
            throw `${item.name}已存在,请勿重复添加`;
          }
        });
        data.forEach((item) => {
          let obj = {
            equipmentId: item.id,
            equipmentName: item.name,
            typeId: item.typeId,
            typeName: item.typeName,
          };
          this.patrolEquipConfig.data.push(obj);
        });
        this.patrolEquipConfig.data;
        this.showDevice = false;
      } catch (error) {
        this.$message.warning(error);
      }
    },
    //上移
    moveUp(row, index) {
      if (index > 0) {
        let upDate = this.patrolEquipConfig.data[index - 1];
        this.patrolEquipConfig.data.splice(index - 1, 1);
        this.patrolEquipConfig.data.splice(index, 0, upDate);
      } else {
        alert("已经是第一条，不可上移");
      }
    },
    //下移
    moveDown(row, index) {
      if (index + 1 === this.patrolEquipConfig.data.length) {
        alert("已经是最后一条，不可下移");
      } else {
        // 保存下一条数据
        let downDate = this.patrolEquipConfig.data[index + 1];
        // 删除下一条数据
        this.patrolEquipConfig.data.splice(index + 1, 1);
        // 增添被删除的那一条数据
        this.patrolEquipConfig.data.splice(index, 0, downDate);
      }
    },
    //提交环境表单
    async submitEvn() {
      let formData = await this.$refs.editForm.getFormData();
      if (this.title == "新增巡视环境") {
        this.patrolEvnConfig.data.push(formData);
      } else {
        this.patrolEvnConfig.data.splice(this.rowIndex, 1, formData);
      }
      this.show = false;
    },
    //提交设备表单
    async submitEquip() {
      try {
        let formData = await this.$refs.addEquipment.getAllInfo();
        if (this.title1 == "新增巡视设备") {
          this.patrolEquipConfig.data.push(formData);
        } else {
          this.patrolEquipConfig.data.splice(this.rowIndex, 1, formData);
        }
        this.show1 = false;
      } catch (error) {}
    },
    //获取巡视内容
    getPatrolContent() {
      try {
        this.patrolEquipConfig.data.forEach((item) => {
          if (!item.items || item.items.length == 0) {
            throw "巡视设备检查项不能为空";
          }
        });
        let data = {
          patrolEnvList: this.patrolEvnConfig.data,
          patrolEquipList: this.patrolEquipConfig.data,
        };
        return data;
      } catch (error) {
        this.$message.warning(error);
        throw error;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .tableList {
    height: 100%;
    margin-top: 20px;
    .add {
      margin: 10px 0 10px 10px;
      display: flex;
      span {
        margin: 0 18px 0 20px;
      }
      .require::before {
        content: "*";
        color: red;
        margin-right: 4px;
      }
    }
    .table {
      margin-left: 100px;
    }
  }
}
</style>